<template>
  <div class="login_form">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="0px"
      status-icon
    >
      <div class="mt-lg">
        <el-form-item prop="mobile">
          <el-input
            :prefix-icon="Iphone"
            placeholder="请输入邮箱"
            size="large"
            v-model="ruleForm.mobile"
          />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            :prefix-icon="Lock"
            placeholder="请输入密码"
            size="large"
            type="password"
            show-password
            v-model="ruleForm.password"
          />
        </el-form-item>
      </div>
      <el-form-item class="login-button">
        <el-button
          :loading="loading"
          size="large"
          class="wh"
          type="primary"
          @click="handleLogin"
          >登 录</el-button
        >
      </el-form-item>
      <el-form-item>
        <div class="flex-y-center wh">
          <div class="flex-1">
            <el-checkbox
              v-model="ruleForm.remember"
              label="记住密码"
              size="large"
            />
          </div>
          <div
            class="flex-x-end c-blue f-s-14 pointer"
            @click="handleForgotPassword"
          >
            忘记密码
          </div>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import { ref, getCurrentInstance, onMounted } from "vue";
import { useRouter } from "vue-router";
import { Iphone, Lock, Key } from "@element-plus/icons-vue";
import {
  getCookies,
  setCookies,
  setLocalStorage,
  clearLoginInfo,
} from "@/utils/cache.js";
const { proxy } = getCurrentInstance();
const ruleForm = ref({});
const router = useRouter();
const ruleFormRef = ref();
const loading = ref(false);
onMounted(() => {
  const account = getCookies("ACCOUNT_INFO");
  if (account) {
    ruleForm.value = JSON.parse(atob(account));
    if (ruleForm.value.code) {
      ruleForm.value.code = "";
    }
  }
});
const handleForgotPassword = () => {
  router.push("/ForgetPassword");
};
const handleLogin = () => {
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      const params = {
        url: "/buyer/login",
        data: ruleForm.value,
      };
      loading.value = true;
      proxy.$post(params).then(
        (res) => {
          if (ruleForm.value.remember) {
            setCookies("ACCOUNT_INFO", btoa(JSON.stringify(ruleForm.value)));
          } else {
            setCookies("ACCOUNT_INFO", btoa("{}"));
          }
          setCookies("TOKEN", res.jwt);
          setLocalStorage("USER_INFO", res.user);
          loading.value = false;
          router.push("/");
        },
        () => {
          clearLoginInfo();
          loading.value = false;
        }
      );
    }
  });
};
const rules = ref({
  mobile: [
    {
      required: true,
      message: "请输入邮箱",
      trigger: "blur",
    },
  ],
  code: [
    {
      required: true,
      message: "请输入验证码",
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
      trigger: "blur",
    },
  ],
});
</script>

<style lang="less" scoped>
:deep(.el-tabs__nav) {
  width: 100% !important;
  justify-content: space-around;
}
.login_form {
  margin: 50px 70px 0 70px;
  .login-button {
    margin-top: 70px;
  }
}
</style>